<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">
        .con{
            width: 800px;
            height: 600px;
            border: 1px solid #000;
            margin: 50px auto;
            /*background-image: url("../images/life.png"); !* 默认为填充模式 *!*/
            /*background-repeat: no-repeat; !* 设置图片重复方式 *!*/
            /*background-position: center;*/
            background: url("../images/cola.jpg") no-repeat center;
        }
        .box2,.box1 {
            width: 300px;
            height: 100px;
            margin: 10px;
        }
        .box1{
            background-color: gold;
            /* 相对定位 保留原文档流位置 相对元素原位置定位
            position: relative;
            left: 50px;
            top: 50px; */

            /*
            绝对定位 元素脱离文档流 不占据原位置
            相对上一个指定位置的元素定位，都无定位则以body为参照定位
            */
            /*position: absolute;*/
            /*left: 50px;*/
            /*top: 50px;*/

            /*
            固定定位 相对浏览器窗口定位
             */
            position: fixed;
            left: 50px;
            top: 50px;
            z-index: 1; /* 定位层级 层级越高的在上面*/
        }
        .box2{
            position: relative;
            left: 50px;
            top: 50px;
            background-color: dimgray;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="con">
        lolololo
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>